---
type: integration
title: '@astrojs/svelte'
description: Aprende a utilizar la integración del framework @astrojs/svelte para ampliar el soporte de componentes en tu proyecto de Astro.
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/svelte/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';

Esta **[integración de Astro][astro-integration]** permite el renderizado en el lado del servidor y la hidratación en el lado del cliente para tus componentes de [Svelte](https://svelte.dev/). Compatible con Svelte 3, 4, y 5 (experimental).

## Instalación

Astro incluye un comando `astro add` para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes [instalar las integraciones manualmente](#instalación-manual) en su lugar.

Para instalar `@astrojs/svelte`, ejecuta lo siguiente desde el directorio de tu proyecto y sigue las instrucciones:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add svelte
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add svelte
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add svelte
  ```
  </Fragment>
</PackageManagerTabs>

Si tienes algún problema, [no dudes en informárnoslo en GitHub](https://github.com/withastro/astro/issues) y prueba los pasos de instalación manual a continuación.

### Instalación manual

Primero, instala el paquete `@astrojs/svelte`:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/svelte
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/svelte
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/svelte
  ```
  </Fragment>
</PackageManagerTabs>

La mayoría de los gestores de paquetes instalarán también las dependencias asociadas. Si ves un mensaje de advertencia de "No se puede encontrar el paquete 'svelte'" (o similar) cuando inicias Astro, tendrás que instalar Svelte:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install svelte
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add svelte
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add svelte
  ```
  </Fragment>
</PackageManagerTabs>

Luego, aplica la integración a tu archivo `astro.config.*` usando la propiedad `integrations`:

```js title="astro.config.mjs" ins={2} ins="svelte()"
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  // ...
  integrations: [svelte()],
});
```

## Empezando

Para usar tu primer componente Svelte en Astro, dirígete a nuestra [documentación de frameworks UI][astro-ui-frameworks]. Explorarás:

* 📦 como se cargan los componentes de framework,
* 💧 opciones de hidratación del lado del cliente, y
* 🤝 oportunidades para mezclar y anidar frameworks juntos

## Opciones

Esta integración está impulsada por `@sveltejs/vite-plugin-svelte`. Para personalizar el compilador de Svelte, se pueden proporcionar opciones a la integración. Consulta la [documentación de `@sveltejs/vite-plugin-svelte`](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/config.md) para obtener más detalles.

### Opciones por defecto

Esta integración pasa las siguientes opciones predeterminadas al compilador de Svelte:

```js
const defaultOptions = {
  emitCss: true,
  compilerOptions: { dev: isDev, hydratable: true },
  preprocess: vitePreprocess(),
};
```

Estos valores `emitCss`, `compilerOptions.dev`, y `compilerOptions.hydratable` son necesarios para construir correctamente para Astro y no pueden ser anulados.

Proporcionar tus propias opciones de `preprocess` **sobrescribirá**  la configuración predeterminada de[`vitePreprocess()`](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/preprocess.md). Asegúrate de habilitar las banderas de preprocesamiento necesarias para tu proyecto.

Puedes establecer opciones ya sea pasándolas a la integración `svelte` en `astro.config.mjs` o en `svelte.config.js`. Cualquiera de estos sobrescribiría la configuración predeterminada de `preprocess`:

```js title="astro.config.mjs" "preprocess: []"
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [svelte({ preprocess: [] })],
});
```

```js title="svelte.config.js"
export default {
  preprocess: [],
};
```

## Intellisense para TypeScript

<Since v="2.0.0" pkg="@astrojs/svelte" />

Si estás utilizando un preprocesador como TypeScript o SCSS en tus archivos Svelte, puedes crear un archivo `svelte.config.js` para que la extensión del IDE de Svelte pueda analizar correctamente los archivos Svelte.

```js title="svelte.config.js"
import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
};
```

Este archivo de configuración se agregará automáticamente cuando ejecutes `astro add svelte`.

[astro-integration]: /es/guides/integrations-guide/

[astro-ui-frameworks]: /es/guides/framework-components/#usando-componente-de-framework
